import {
	ref
} from 'vue'

// stores/product.ts
import { defineStore } from 'pinia'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [],
    filters: {
      selectedBrands: [],
      selectedSpecs: []
    }
  }),
  actions: {
    // 切换品牌选择
    toggleBrand(brandId) {
      const index = this.filters.selectedBrands.indexOf(brandId)
      index === -1 
        ? this.filters.selectedBrands.push(brandId)
        : this.filters.selectedBrands.splice(index, 1)
    },
    
    // 切换规格选择
    toggleSpec(specId) {
      const index = this.filters.selectedSpecs.indexOf(specId)
      index === -1
        ? this.filters.selectedSpecs.push(specId)
        : this.filters.selectedSpecs.splice(index, 1)
    }
  },
  getters: {
    // 获取筛选后的商品
    filteredProducts: (state) => {
      return state.products.filter(product => {
        // 品牌筛选条件
        const brandMatch = state.filters.selectedBrands.length === 0 || 
          state.filters.selectedBrands.includes(product.brand)
        
        // 规格筛选条件
        const specMatch = state.filters.selectedSpecs.length === 0 || 
          state.filters.selectedSpecs.every(spec => 
            product.specs.includes(spec)
          )
        
        return brandMatch && specMatch
      })
    }
  }
})